<!--奖金测算-基础配置-机构-->
<template>
  <div>
    <flexible :leftCols="leftCols" ref="flexibleRef">
      <template slot="left">
          <div class="mb10" v-if="moudelType != 'xs'">
            <el-button type="primary" @click="addGroup" >新增</el-button>
            <el-button type="danger"  @click="delGroup(true)" >删除</el-button>
            <el-button type="primary" plain @click="exportDataGroup">导入</el-button>
          </div>
          <el-input
            placeholder="请输入组名称进行过滤"
            v-model="searchForm.groupName" class="mb10" clearable>
          </el-input>
          <el-table
            ref="tableSecondLeftRef"
            height="calc(100vh - 280px)"
            highlight-current-row
            :data="tableDataGroupFilter"
            v-loading="groupTableLoading"
            tooltip-effect="dark"
            row-key="id"
            key="second"
            border
            :row-class-name="rowClass"
            @row-click="rowClick"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              header-align="center"
              align="center"
              width="55"
            v-if="moudelType != 'xs'">
            </el-table-column>
            <el-table-column
              prop="groupName"
              label="组名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="groupRatio"
              label="组系数"
              width="70"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column align="center" width="120px" label="操作" v-if="moudelType != 'xs'">
              <template slot-scope="scope">
                <el-button type="text" @click="editGroup(scope.row)">编辑</el-button>
                <el-button type="text"  class="delete_btn" @click="delGroup(false,scope.row)" >删除</el-button>
                <span class="nav">
                  <i class="el-icon-caret-right"> </i>
                </span>
              </template>
            </el-table-column>
          </el-table>
      </template>
      <template slot="right">
          <div class="group-title">组人员</div>
          <div class="mb10">
            <el-button type="primary" @click="addUser" :disabled="currentGroup == ''" v-if="moudelType != 'xs' ">添加人员</el-button>
            <el-button type="danger" plain @click="delUser(true)" :disabled="currentGroup == ''" v-if="moudelType != 'xs' ">删除</el-button>
            <el-button type="primary" plain :disabled="currentGroup == ''" @click="exportDataGroupUser">导入</el-button>
            <el-button type="success" plain @click="batchEdit" :disabled="currentGroup == ''" v-if="moudelType == 'xs'">批量修改系数</el-button>
          </div>
          <el-table
           v-loading="userTableLoading"
          :data="tableDataUser"
          @selection-change="handleSelectionChangeUser"
          height="calc(100vh - 270px)"
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="55">
          </el-table-column>
          <el-table-column width="55" label="序号" align="center" header-align="center">
             <template slot-scope="scope">
                {{scope.$index+1}}
             </template>
          </el-table-column>
          <el-table-column
            prop="personCode"
            label="员工编号"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="personName"
            label="姓名"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="post"
            min-width="120"
            show-overflow-tooltip
            label="岗位/职级">
          </el-table-column>
          <el-table-column
            prop="postRatio"
            width="100"
            v-if="moudelType == 'xs'"
            label="岗位系数">
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="机构名称"
          min-width="150">
          </el-table-column>
          <el-table-column align="center" width="120px" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="text"  class="delete_btn" @click="delUser(false,scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </flexible>
    <!--新增组-->
    <group-form ref="groupFormRef" @refresh="refreshGroupTable"></group-form>
    <!-- 添加人员-->
    <select-user-com ref="selectUserComRef" @sendUserData="getUserData" @refresh="refreshUserTable" :loading="selectUserLoading"></select-user-com>
    <!--批量修改系数 -->
    <group-ratio-form ref="groupRatioFormRef" @refresh="refreshUserTable" ></group-ratio-form>
  </div>
</template>

<script>
import flexible from "@/views/bonusmanage/components/flexible";
import groupForm from "@/views/bonusmanage/basic/org/groupForm";
import selectUserCom from "@/views/bonusmanage/components/selectUserCom";
import {getGroupList, groupDeleteBatch, getUserOfGroupById, userDeleteBatch} from "@/api/bonus/calculateorgconfig";
import groupRatioForm from "@/views/bonusmanage/basic/org/groupRatioForm";
import { addUserOfGroup} from '@/api/bonus/calculateorgconfig' ;
export default {
  name: "index",
  props:{
    moudelType:String,
    default:''
  },
  components:{
    groupRatioForm,
    flexible,
    groupForm,
    selectUserCom,

  },
  computed: {
    tableDataGroupFilter() {
      return  this.tableDataGroup.filter((data) => {
        return !this.searchForm.groupName || data.groupName.includes(this.searchForm.groupName)
      })
    }
  },
  data(){
    return{
      groupTableLoading:false,
      userTableLoading:false,
      selectUserLoading:false,
      leftCols:9,
      searchForm:{groupName:''},
      tableDataUser: [],
      tableDataGroup:[],
      multipleSelection:[],
      multipleSelectionUser:[],
      currentGroup:''
    }
  },
  created(){
    this.groupOnLoad()
  },
  mounted() {
  },
  methods: {
    addGroup(){
      this.$refs.groupFormRef.init('add') ;
    },
    editGroup(item){
      this.$refs.groupFormRef.init('edit',item) ;
    },
    //删除
    delGroup(batch,item){
        let msg = '' ;
        let ids = ''
        if (batch){ //批量
          msg = '确定删除选中的数据吗?'
          if (this.multipleSelection.length == 0){
            this.$message.error('请勾选要删除的数据')
            return ;
          }
          ids = this.ids.toString() ;
        }else{ //单条
          msg = '确定删除此条数据吗?'
          ids = item.id ;
        }
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.groupTableLoading = true ;
          groupDeleteBatch({ids:ids}).then(res=>{
            this.$message.success('操作成功')
            this.groupOnLoad() ;
          }).catch(()=>{
            this.groupTableLoading = false ;
          })
        }).catch(() => {

        });
    },
    rowClick(item){
      this.currentGroup = item
      this.userTableLoading = true ;
      getUserOfGroupById({groupId:item.id}).then(res=>{
        if (res.data.code == 0){
          this.tableDataUser = res.data.data.records
        }else{
          this.$message.error('获取该组人员列表失败')
        }
        this.userTableLoading = false ;
      }).catch(err=>{
        this.userTableLoading = false ;
      })
    },
    groupOnLoad(){
        this.groupTableLoading = true ;
        getGroupList().then(res=>{
          if (res.data.code == 0){
            this.tableDataGroup = res.data.data
          }else{
            this.$message.error('获取虚拟分组列表失败')
          }
          this.groupTableLoading = false ;
        }).catch(err=>{
          this.groupTableLoading = false ;
        })
    },
    refreshGroupTable(){
      this.groupOnLoad() ;
    },
    handleSelectionChange(list){
      this.multipleSelection = list ;
      this.ids = this.multipleSelection.map((ele) => {
        return ele.id
      })
    },
    handleSelectionChangeUser(list){
      this.multipleSelectionUser = list ;
      this.userIds = this.multipleSelectionUser.map((ele) => {
        return ele.id
      })
    },
    rowClass(){
      return "rowNavigation" ;
    },
    //批量修改系数
    batchEdit(){
      this.$refs.groupRatioFormRef.init('edit',this.currentGroup) ;
    },
    addUser(){
      this.$refs.selectUserComRef.init('add',JSON.parse(JSON.stringify(this.tableDataUser)))
    },
    refreshUserTable() {
       this.rowClick(this.currentGroup);
    },
    getUserData(userList){
      userList.map(item=>{
        item.groupId = this.currentGroup.id
      })
      this.selectUserLoading = true //组件的转圈
      addUserOfGroup(userList).then(res=>{
         if (res.data.code == 0){
           this.selectUserLoading =  false ;
           this.$refs.selectUserComRef.handleCancel(true) ; //关闭弹框
         }
      }).catch(()=>{
        this.selectUserLoading =  false ;
      })
    },
    //删除
    delUser(batch,item){
      let msg = '' ;
      let ids = ''
      if (batch){ //批量
        msg = '确定删除选中的数据吗?'
        if (this.multipleSelectionUser.length == 0){
          this.$message.error('请勾选要删除的数据')
          return ;
        }
        ids = this.userIds.toString() ;
      }else{ //单条
        msg = '确定删除此条数据吗?'
        ids = item.id ;
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.userTableLoading = true ;
        userDeleteBatch({ids:ids}).then(res=>{
          this.$message.success('操作成功')
          this.rowClick(this.currentGroup) ;
          this.userTableLoading = false ;
        }).catch(()=>{
          this.userTableLoading = false ;
        })
      }).catch(() => {

      });
    },
    exportDataGroup(){
      alert('导入功能待实现')
    },
    exportDataGroupUser(){
      alert('导入功能待实现')
    },
  }
}
</script>

<style scoped>

</style>
